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Kata Pengantar 


aleri foto merupakan bagian dari sebuah situs atau website, yang 

digunakan untuk menampilkan portofolio, produk, maupun album 

pribadi ke pengguna internet secara luas. Galeri foto mampu me- 

nampilkan foto tampak lebih rapi dan atraktif dengan efek-efek 
yang digunakan. Zoom, rotasi, slider, slide show rolling show merupakan 
contoh sedikit efek yang dapat diterapkan pada galeri foto. 


Buku 15 Cara Bikin Galeri Foto Online dengan PHP dan HTML ini mem- 
bahas secara lengkap pembuatan galeri foto online menggunakan baha- 
sa pemrograman PHP dan HTML. Tidak hanya itu, PHP dan HTML juga 
dikombinasikan dengan CSS dan J@uery untuk menghasilkan sebuah 
galeri foto yang atraktif. Contoh-contoh yang dijelaskan di dalam buku ini 
sangat mudah dipahami dan dapat Anda modifikasi ulang jika ingin mem- 
peroleh tampilan galeri foto yang berbeda. 


STRUKTUR PENULISAN BUKU 


Buku ini menjelaskan langkah-langkah pembuatan galeri foto online 
menggunakan PHP dan HTML. Tiap pembahasan dalam buku ini dijelas- 
kan secara detail sehingga mudah dipahami oleh semua kalangan pem- 
baca. Supaya mudah memahami materi yang dijelaskan, buku ini dibagi 
menjadi 3 bab, yaitu: 


Bab1 Galeri Foto Statis Efek CSS 


Bab ini menjelaskan pembuatan galeri foto statis menggunakan 
efek CSS. Beberapa materi yang dijelaskan dalam bab ini, yaitu 
pembuatan galeri foto sederhana, zoom efek, efek rotasi, hingga 
efek zoom dan rotasi. 


Bab2 Galeri Foto Dinamis Efek CSS 


Bab ini menjelaskan tentang pembuatan galeri foto dinamis 
menggunakan efek CSS. Pembahasan dalam bab ini antara lain 
pembuatan galeri foto slide hover, slide show, rolling show, hing- 
ga thumbnail slide show. 
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Bab 3 Galeri Foto Dinamis Efek Jauery dan CSS 


Bab ini menjelaskan pembuatan galeri foto dinamis mengguna- 
kan efek J@uery dan CSS. Pembahasan di dalam bab ini antara 
lain galeri foto click to move, thumbnail slide show, j@uery slide, 
hingga animate slider. 


APA YANG HARUS ANDA KUASAI? 


Buku ini membahas berbagai hal berkaitan dengan pembuatan galeri foto 
online dengan PHP dan HTML. Di dalam buku ini tidak dibahas secara 
detail mengenai teknik-teknik dasar penyusunan halaman web dengan 
PHP, HTML, maupun CSS. Oleh karena itu, diharapkan pembaca sudah 
memahami dasar-dasar pemrograman web menggunakan bahasa pem- 
rograman PHP, HTML, dan CSS. 


BAGI PARA PEMBACA 


Walaupun dalam menyusun buku ini kami telah melakukan pengkajian 
dan penelitian yang mendalam serta berusaha untuk menyampaikan 
materi secara lengkap dan terstruktur, tentunya setiap karya tidaklah ada 
yang benar-benar sempurna. Mungkin buku ini kurang dapat memenuhi 
kebutuhan para pembaca, atau mungkin para pembaca masih mengala- 
mi kesulitan atau masalah setelah mempelajari buku ini. 


Oleh karena itu, Wahana Komputer membuka lebar kesempatan bagi pa- 
ra pembaca pada khususnya dan masyarakat pengguna komputer pada 
umumnya untuk melakukan konsultasi mengenai berbagai kesulitan yang 
dihadapi khususnya mengenai apa yang telah dijelaskan di dalam buku 
ini melalui situs web kami atau via pos, fax, ataupun e-mail. Di samping 
itu, Anda dapat memanfaatkan pula layanan pelatihan komputer kami 
melalui Lembaga Pendidikan Komputer Wahana, untuk lebih mendalami 
materi-materi yang dipaparkan di dalam buku ini. 


Wahana Komputer 

JL. MT Haryono 637 Semarang 

Tlp. (024) 8314727, 8413238 fax. (024) 8413964 
e-mail: litbang@Owahanakom.com 


web: www.wahanakom.com 
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Galeri Foto Statis 
Efek CSS 


Bab ini akan membahas: 


3 


“ 


Proses menyiapkan database dan tabelnya 
Pembuatan galeri foto sederhana 
Pembuatan galeri foto zoom efek 
Pembuatan galeri foto efek rotasi 
Pembuatan galeri foto balon 

Pembuatan galeri foto zoom dan rotasi 


d0 


“ 


d0 


“ 


d0 


“ 


d0 


“ 


d0 


“ 
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susun secara urut dalam satu jendela dengan tatanan yang statis. 
Dalam bab ini, akan dijelaskan beberapa galeri foto statis efek 
CSS sebagai berikut: 


Galeri Foto Sederhana 


G aleri foto statis efek CSS merupakan sebuah galeri foto yang ter- 


Galeri Foto Zoom Efek 
Galeri Foto Efek Rotasi 


Galeri Foto Balon 


SSS Sa 


Galeri Foto Efek Animasi Zoom dan Rotasi 


MENYIAPKAN DATABASE 


Sebelum membuat galeri foto, Anda perlu menyiapkan sebuah database 
untuk menyimpan data-data yang diperlukan. Dalam pembahasan buku 
ini, digunakan sebuah database dengan nama “gallery” dan sebuah tabel 
dengan nama “foto”. Database dan tabel ini, nantinya digunakan dalam 
setiap pembahasan masing-masing subbab. 


MEMBUAT DATABASE 


Database diperlukan untuk menyimpan data teks sebagai alamat image 
serta keterangan gambar yang akan ditampilkan pada galeri. Supaya le- 
bih mudah, disarankan Anda membuat database melalui halaman Php- 
MyAdmin. Jalankan web server Anda, kemudian ketik URL http:localhost 
/phpmyadmin untuk masuk ke halaman PhpMyAdmin. Jika Anda meng- 
gunakan web server XAMPP seperti yang penulis gunakan, maka setelah 
masuk ke halaman PhpMyAdmin, klik tab SAL kemudian ketik kode di 
bawah untuk membuat database dengan nama “gallery”. Klik tombol GO 
setelah kode SAL pembuatan galeri selesai Anda ketik. 


CREATE DATABASE “gallery' : 
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A Server 127004 » (MI Database: gallery » KJ Table: foto 


Hj Browse | (FI structure | Al SOAL w Search IU Insert (Wi Export H3 Import | RB Privileges «fl Operations | |ih More 
Run SAL guery/guerles on database gallery: (5) 


CREATE DATABASE "gallery" : Columns 
nama 
kategori 
lokasi 


SELECT" SELECT INSERT UPDATE) (DELETE) ( Clear 


Bookmark this SOL guery 


| Delimiter 1! Show this guery here again | | Retain guery box s0 


Gambar 1.1 Membuat database gallery 


tag A Server 127001 


mil batabases | A| saL SI status | MB Users (Ff) Export |? Import «$ Settings W Replication 


Gambar 1.2 Pembuatan database berhasil 


MEMBUAT TABEL 


Tabel digunakan untuk menyimpan data teks pada sebuah database 
yang nantinya akan dipanggil menggunakan kode PHP. Pada buku ini, 
akan dibuat tabel dengan nama “foto” di dalam database yang sudah dib- 
uat. 


Untuk membuat tabel, ketik kode di bawah pada tab SOAL halaman php- 
MyAdmin. Setelah selesai Anda ketik, klik tombol GO. 


CREATE TABLE gallery . foto” ( 
“nama” VARCHAR( 225 ) NOT NULL, 
“kategori” VARCHAR( 15 ) NOT NULL , 
“lokasi” VARCHAR( 225 ) NOT NULL, 
PRIMARY KEY (“nama”) 

) ENGINE — InnoDB, 
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"3 ASerer 127001 


mi| Databases | A| saL' SI Status IK Users 
Run SOL guery/gueries on server "127.0.0.1": 18) 


1 (CREATE TABLE “gallery .' foto” ( 

2 'nama' VARCHAR( 225 ) NOT NULL , 

3 'kategori' VARCHAR( 15 ) NOT NULL , 
4 "lokasi" VARCHAR( 225 ) NOT NULL , 
5 PRIMARY KEY ( "nama" ) 

€ | ENGINE - InnoDB: 


Is 


Gambar 1.3 Proses pembuatan tabel “foto” 


MEMBUAT KONEKSI DATABASE 


Koneksi dibuat supaya database yang sudah Anda buat dapat terhubung 
dengan halaman galeri foto. Dengan koneksi database pula, perintah-pe- 
rintah eksekusi database dapat dijalankan. Untuk membuat koneksi data- 
base, buka aplikasi Notepad atau Notepad-4, kemudian ketik kode di 
bawah. 


«php //koneksi ke database 

$conn — mysgl. connect("localhost', 'root', "): 
mysgl select db('gallery): 

» 


Setelah selesai Anda ketik, simpan dengan nama “koneksi.php”. 
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File Edit Search View Encoding Language Settings Macro Run Plugir 


ds 3 Ka B2 Lam Oa SGB 


Elkoneksi.php E3 


1 Hk?php //koneksi ke database 


£conn - mysgl connect ('Jlogalhgak", "root", ''): 


mysgl select db('gallery"'): 
“25 


Gambar 1.4 Membuat koneksi database 


GALERI FOTO SEDERHANA 


Subbab berikut ini akan menjelaskan pembuatan galeri foto sederhana 
sebagai awal sebelum Anda melangkah ke pembuatan galeri foto yang 
lain. Pada galeri foto sederhana ini, terdapat menu upload untuk meng- 
upload foto yang akan ditampilkan pada galeri, serta menu kategori untuk 
mengelompokkan foto. 


Galeri foto ini nantinya Anda simpan di localhost pada XAMPP, yaitu pa- 
da folder C:/xamppihtdocs!. Supaya lebih terstruktur, disarankan Anda 
membuat folder untuk mengelompokkan masing-masing galeri yang akan 
dibuat. Semisal pada pembahasan dalam subbab ini, file-file galeri foto 
sederhana disimpan pada direktori C:xamppihtdocslgalerisederhana. 
Langkah membuat galeri sederhana: 


1. Pertama, buat form upload gambar untuk memilih gambar yang akan 
ditampilkan ke dalam galeri. Ketik kode di bawah pada Notepad, ke- 
mudian simpan dengan nama “form.php”. 


Shtml- 

«head» 

ctitle»New Picture title» 

«/head» 

«body» 

«form name-"form1" action-"save-gallery.php" method-"post" 
enctype-"multipart/form-data"» 

File: xbr/» 

Sinput class-"form" type- "file" name-—"file" id—"file"/2 £br/2 
Kategori: £br/- 

«select class-"form" name-"kategori" 

«option value-"landscape"» Landscape option» 
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«option value-"portrait"- Portrait «/option- 

«/select»£br/2 

«input class-"tombol" type-"submit" name-"save" value-"Upload"/» 
«/forms 

«/body2- 

htm» 


Setelah skrip di atas selesai Anda ketik, buatlah sebuah folder ber- 
nama “upload”. Pastikan folder ini berada dalam satu direktori yang 
sama dengan file php yang Anda buat. 


F Name 


da upload 
Fi form 


Fi koneksi 


Gambar 1.5 Membuat folder upload 


Lanjutkan membuat skrip supaya data gambar yang akan Anda 
upload dapat tersimpan dalam database, serta file gambar dapat ter- 
simpan di dalam folder upload. Ketik skrip di bawah pada Notepad 
dan simpan dengan nama “save-gallery.php”. 


«?php 

indude ("koneksi.php"): 

iflempty($ FILES) && $ FILES filejisize') « 2000000 && $ FILES file('error') -- OX 
$fileName — $ FILESffile)('name'): 

$move —move uploaded file($ FILESI"fileCtmp name', 'upload/'.$fileName): 
i$moveX 

$sgl — "insert into foto (nama, kategori, lokasi) values('$fileName', 

"$ POSTI'kategori'.", 'upload/$fileName))", 

mysgl guery($sal), 

header("Location: index.php"): 

exit, 

3 

5 


» 
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Selanjutnya, buat skrip penghubung antar halaman untuk memper- 
mudah menampilkan data. Tuliskan skrip berikut pada Notepad dan 
simpan dengan nama 'isi.php”. 


«?php error reporting(0), 

if $ GETIpageJ--") 
(indude("gallery.php”): 

y 

else £ include ("$ GETIpagel.php): 
y 


» 


Setelah halaman penghubung dibuat, buatlah halaman index.php se- 
bagai halaman utama galeri sederhana ini. Tuliskan skrip berikut pada 
Notepad dan simpan dengan nama “index.php”. 


S!DOCTYPE HTML2 

Shtmi- 

head» 

link rel-"shortcut icon" href—""- 

ctitle»Gallery Foto Sederhana title» 

link rel-"stylesheet" href—"all.css" type-"text/css" media-"screen"- 
«/head» 


«body» 

cdiv id-"menu" 

sub 

Slivxa href—"index.php"5 Home /a» Mlis 
Slivxa href—"index.php" Gallery /a» lis 
cli-xa href-"?page-form" Upload Ya» lis 
Sli-xa href-"index.php"5Buku Tamus/a- M/lis 
SU 

«/divs 

cdiv id-"halaman"- 

«php include (“isi.php"): ?5 

«ps 

Gallery Foto Sederhana 2014 

«/p3 

c/divs 
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«/body2- 
htm» 


Tambahkan style menggunakan skrip CSS untuk mempercantik hala- 
man index.php. Ketik skrip CSS berikut dan simpan dengan nama. 


Vall.css”. 

body 

background:#222: 

font:100Yo Verdana, Geneva, sans-serif 

color: #ccc, 

font-size:12px, 

5 

#menuf 

font-size: 16px, 

width:100Yo: 

height:50px, 

position:fixed: 

margin:-66px Opx Opx -10px: 

5 

#menu uK 

width:100Yo: 

height:50px, 

padding-left:200px, 

display:block: 

background:-moz-linear-gradient(top, #0cf 0Yo, #09C 100760), 
background:-webkit-linear-gradient(top, #0cf 0Yo, #09C 100960), 
background:-o-linear-gradient(top, #Ocf 0Yo, #09C 1000), 
background:-ms-linear-gradient(top, #Ocf 0Yo, #09C 10090): 
background:linear-gradient(top, #Ocf 0Yo, #09C 100Y0): 
border-bottom:5px solid #333: 

5 

#menu ul IK 

text-align: center, 

margin:0px Opx Opx Opx, 

position:relative, 

top:0px, 

foat:left, 


Versi Pdf Lengkapnya di ipusnas.com 


width:120px, 

padding:16px: 

display:inline, 

background:-moz-linear-gradient(top, #0cf 0Yo, #09C 100760): 
background:-webkit-linear-gradient(top, #0cf 0Yo, #09C 100760), 
background:-o-linear-gradient(top, #Ocf 0Yo, #09C 100”), 
background:-ms-linear-gradient(top, #Ocf 0Yo, #09C 10070): 
background:linear-gradient(top, #Ocf 0Yo, #09C 100Y0): 

5 

#menu ul li-hoverf 

background: #333, 

5 

#menu ul li af 

text-decoration:none: 

color: #fff, 

5 


Perek halaman PP kbrerotokokotok/ 


#halamanf 
width:1000px: 
height:auto, 
margin:50px auto, 
border:1px solid #333: 
padding:20px 20px: 
background:#333: 

5 


pt 

background:#222: 
padding:10px: 
width:1000px, 

margin:10px Opx Opx -10px, 
5 


Perekat Jain- lain etokaktokokokak 
.form4 

width:300px, 

padding:10px 20px: 

background:#333: 

border:1px solid #ccc, 
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color: #fff, 
margin:10px 20px, 
y 

.tombokK 
width:100px, 
height:35px: 
background: #66f: 
border: 1px solid #66f: 
margin:10px 20px, 
5 

.tombol:hoverf 
background: #333: 
y 


Supaya foto yang sudah Anda upload dapat tampil pada galeri, Anda 
buat sebuah halaman galeri dengan nama “gallery.php”. Skripnya: 


S!DOCTYPE HTML2 

html» 

«head» 

ctitle»Gallery title» 

link rel-"stylesheet" href-"foto.css" type-"text/css" media-"screen"» 

«/head» 

«body» 

«div id-"poto"— 

«h32 Kategori Portraitx/h3» 

«?php 

indude (“koneksi.php"): 
$sgl - mysgl guery("select “ from foto where kategori-'portrait"): 
$hasil- mysgl num. rows($sal): 

while ($data - mysgl fetch row($sal)) // menampilkan kemungkinan dari hsil input 

t 


echo" clis 

«span» $data|0|«/span- 

«a href—'$dataf27' target-' blank'- 
«img src-'$data(275 

Ya lis" 


. 
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» 
«/divs 


cdiv id-"foto" 
«h3»Kategori Landscapex/h3- 
«?php 
$sgl —- mysgl guery("select “ from foto where kategori-'landscape"): 
$hasil- mysgl num. rows($sal): 
while ($data - mysgl fetch row($sal)) // menampilkan kemungkinan dari hsil input 
d 


echo" cli- 

«span» $data|0|«/span- 

«a href—'$dataf27' target-' blank'- 
«img src-'$data(275 

ar lis" 


, 


» 
cidivs 
«/body2- 
«/htmi- 


Percantik halaman galeri dengan menambahkan skrip CSS. Ketik 
skrip CSS di bawah pada Notepad dan simpan dengan nama 
“foto.css”. 


#potot 

font-size: 15px, 
width:905px, 
margin:10px auto, 
padding:10px, 

5 

#poto IK 
display:inline, 
margin:5px auto, 
width:150px, 
height:200px: 


Versi Pdf Lengkapnya di ipusnas.com 


padding:5px 5px: 

5 

#poto li spani 

margin:173px Opx Opx 6px, 
visibility:hidden, 

position: absolute: 

z-index:1: 

width: auto: 

padding:10px: 

font-size: 11px: 
background:rgba(0,0,0, 0.7): 

5 

#poto li:hover span 
visibility:visible, 

5 

#poto li af 

display: inline: 
text-decoration:none: 

5 

#poto li imgi 

padding:5px 5px: 

background: #ccc: 

width:150px, 

height:200px: 

border:1px solid #666: 

5 

#poto li img:hoverf 
box-shadow:Opx Opx 10px #09Ff, 
-webkit-box-shadow:0Opx Opx 10px #09f, 
-ms-box-shadow:Opx Opx 10px #09f, 
-o-box-shadow:Opx Opx 10px #09f, 
5 


Perek landscape tkokokokokokakokokok 
#fotol 

font-size: 15px, 

width:905px, 

margin:10px auto, 

padding:10px: 
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y 

#foto Ii 

display:inline: 

margin:5px auto, 
width:200px, 

height: 150px, 

padding:5px 5px: 

y 

#foto li span 
margin:123px Opx Opx 6px, 
visibility:hidden, 

position: absolute: 
z-index:1: 

width: auto, 

padding:10px: 
font-size:11px, 
background:rgba(0,0,0, 0.7): 
y 


#foto li:hover spanf 

visibility:visible: 

5 

#foto li af 

display: inline: 

text-decoration:none: 

5 

#foto li img 

padding:5px 5px: 

background: #ccc: 

width:200px, 

height:150px, 

border:1px solid #666: 

5 

#foto li img:hovert 

box-shadow:Opx Opx 10px #09f, 
-webkit-box-shadow:0Opx Opx 10px #09f, 
-ms-box-shadow:Opx Opx 10px #09f, 
-o-box-shadow:0Opx Opx 10px #09f, 
5 
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9. Untuk melihat hasilnya, akses URL galeri foto. Seperti yang sudah di- 
jelaskan di awal subbab, penulis mengakses galeri foto dengan me- 
ngetikkan url http:/localhost'galerisederhana. Halaman yang pertama 
kali muncul adalah index.php dengan tab “Upload” aktif. 


Solery eta Saderpana 4 


€ 3 mareat 3 P4 


Gambar 1.6 Gambar halaman upload 


Gambar 1.7 Gambar halaman galeri 


GALERI FOTO ZOOM EFEK 


Galeri foto zoom efek adalah sebuah galeri foto yang menampilkan foto 
secara thumbnail dan memiliki efek zoom apabila kursor menyentuh sa- 
lah satu foto thumbnail tersebut. Langkah membuat galeri foto zoom e- 
fek: 
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Pastikan Anda sudah memiliki database “gallery” di mana di dalam- 
nya terdapat tabel “foto” yang telah dibahas pada awal bab. 

Di dalam folder htdocs, buat folder baru dengan nama “galerizoom- 
efek” untuk menyimpan file-file galeri foto zoom efek. 

Buat form upload gambar untuk memilih gambar yang akan di-upload/ 
ditampilkan ke dalam galeri. Ketik kode di bawah pada Notepad, ke- 
mudian simpan dengan nama “form.php”. 


html» 

«head» 

ctitle»New Picture /title» 

«/head» 

«body» 

«form name-"form1" action-"save-gallery.php" method-"post" 
enctype-"multipart/form-data"» 

File: «br/» 

Kinput class-"form" type- "file" name-—"file" id—"file”/2 £br/2 
Kategori: «br/» 

«select class-"form" name-"kategori" 

«option value-"landscape"» Landscape option» 

«option value-"portrait"-Portrait«/option» 

«/select»£br/» 

«input class-"tombol" type-"submit" name-"save" value-"Upload"/» 
«/forms 

«/body- 

htm» 


Di dalam folder “galerizoomefek” buat sebuah folder bernama “up- 
load” untuk menyimpan file gambar/foto. 

Lanjutkan membuat skrip supaya data gambar yang akan Anda up- 
load dapat tersimpan dalam database, serta file gambar/foto dapat 
tersimpan di dalam folder upload. Ketik skrip di bawah pada Notepad 
dan simpan dengan nama “save-gallery.php”. 


«?php 

indude ("koneksi.php"): 

iflempty($ FILES) && $ FILES filejisize') « 2000000 && $ FILESI file('error') -- OX 
$fileName — $ FILESffile)('name'): 

$move —move uploaded file($ FILESFfle'(tmp name'), 'Upload/'.$fileName): 
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igmoveX 

$sgl —- "insert into foto (nama, kategori, lokasi)  values('sfilkName', 
"$ POSTI'kategori'.", 'upload/$fileName')"s 

mysgl guery($sal), 

header("Location: index.php"): 

exit, 

5 

5 


» 


Selanjutnya, buat skrip penghubung antar halaman untuk memper- 
mudah menampilkan data. Tuliskan skrip berikut pada Notepad dan 
simpan dengan nama 'isi.php”. 


«?php error reporting(0), 

if $ GETIpage1--"") 
(indlude("gallery.php): 

y 

else £ include ("$ GETIpage).php”): 
y 


» 


Lanjutkan membuat skrip index.php sebagai halaman utama galeri 
Anda. Tuliskan skrip berikut pada Notepad dan simpan dengan na- 
ma “iIndex.php”. 


S!DOCTYPE HTML- 

htm» 

«head» 

link rel-"shortcut icon" href—""- 

ctitle»Gallery Foto Sederhana /title» 

link rel-"stylesheet" href—"all.css" type-"text/css" media-"screen"» 
«/head» 


«body» 

cdiv id-"menu"s 

«Uu 

Slivxa href—"index.php"5 Home /a» Mlis 
Slivxa href—"index.php" Gallery /a» lis 
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Sli-xa href-"?page-form" Upload Ya» lis 
Sli-xa href-"index.php"5Buku Tamus/a- K/lis 
SU 

/div- 


cdiv id-"body"— 

cdiv id-"halaman"— 

«?php include ("isi.php"): ?5 
cidivs 

cidivs 


«/body» 
htm» 


Tambahkan style CSS untuk mempercantik skrip index.php di atas. 
Ketik skrip CSS berikut dan simpan dengan nama “all.css”. 


body 

background: #999, 

font:100Yo Verdana, Geneva, sans-serif 

color: #333, 

font-size:12px, 

5 

#menut 

font-size: 16px, 

z-index:1: 

width:100Yo: 

height:50px, 

position:fixed: 

margin:-25px Opx Opx -10px, 

5 

#menu uk 

width:100Yo: 

height:50px, 

padding-left:350px: 

display:block: 

background:-moz-linear-gradient(top, #111 0Yo, #333 10090): 
background:-webkit-linear-gradient(top, #111 0Yo, #333 100Yo), 
background:-o-linear-gradient(top, #111 0Yo, #333 100Y0), 
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background:-ms-linear-gradient(top, #111 0Yo, #333 100Yo): 
background:linear-gradient(top, #111 0Yo, #333 100Y0), 
border-bottom:5px solid #333: 
5 
#menu ul IK 
text-align: center, 
margin:0px Opx Opx Opx, 
position:relative, 
top:0px, 
foat:left, 
width:120px, 
padding:16px: 
display:inline: 
background:-moz-linear-gradient(top, #111 0Yo, #333 10090): 
background:-webkit-linear-gradient(top, #111 0Yo, #333 100Yo), 
background:-o-linear-gradient(top, #111 0Yo, #333 100Y0), 
background:-ms-linear-gradient(top, #111 0Yo, #333 100Yo): 
background:linear-gradient(top, #111 0Yo, #333 10090): 
-webkit-transition: all 0.5: 
-moz-transition: all 0.5s: 
-mS-transition: all 0.5s: 
-o-transition: all 0.5s: 
transition: all 0.5s, 
5 
#menu ul li-hoverf 
background: #333, 
5 
#menu ul li af 
text-decoration:none, 
color: #fff, 
5 


Pererteookkhalaman PS rekeetotokokotok 
#bodyi 

width:830px, 

height:710px: 

margin:0px auto, 

padding:0px: 

5 
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